<template>
    <section>
        <div class="order-container">
            <div class="header">
                <h4>评价管理</h4>
            </div>
            <div class="order-con">
                <el-tabs v-model="activeTab"  @tab-click="handleClick" style="">
                    <el-tab-pane label="全部" name="0"></el-tab-pane>
                    <el-tab-pane label="好评" name="1"></el-tab-pane>
                    <el-tab-pane label="中评" name="2"></el-tab-pane>
                    <el-tab-pane label="差评" name="3"></el-tab-pane>
                </el-tabs>
                <div class="order-con__title flex-box">
                    <el-input v-model="orderName" placeholder="订单号" style="width:200px;"></el-input>
                    <el-input v-model="goodsName" placeholder="商品名" style="width:200px;"></el-input>
                    <el-input v-model="userName" placeholder="下单用户" style="width:200px;"></el-input>
                    <el-date-picker
                            v-model="orderTime"
                            type="date"
                            style="min-width:150px;"
                            placeholder="评价日期">
                    </el-date-picker>
                    <el-select v-model="orderReply" clearable placeholder="是否回复">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="searchItem" icon="el-icon-search"></el-button>
                </div>
                <div class="table-box">
                    <el-table :data="orderList" v-loading="tableLoading" style="width: 100%">
                        <el-table-column :resizable="false" label="评价内容">
                            <template slot-scope="scope">
                                <span>{{scope.row.content}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="订单编号/商品">
                            <template slot-scope="scope">
                                <div class="order-goods">
                                    <p>{{scope.row.order.sn}}</p>
                                    <p>{{scope.row.goods.name}}</p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="下单用户">
                            <template slot-scope="scope">
                                <div>
                                    <p v-if="scope.row.user.name">下单用户: {{scope.row.user.name}}</p>
                                    <p>微信昵称: {{scope.row.user.nickname}}</p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="评论时间" prop="updated_at" sortable>
                        </el-table-column>
                        <el-table-column :resizable="false" prop="operation" label="操作">
                            <template slot-scope="scope">
                                <el-button v-show="!scope.row.reply" @click="openMessageBox(scope.row)" type="primary" size="mini">回复评论</el-button>
                                <span v-show="scope.row.reply">已回复</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination" v-if="page.total">
                    <div class="pagination-item">
                        <el-pagination layout="prev, pager, next" :total="page.total" prev-text="上一页"
                                       next-text="下一页" :page-size="pageSize"
                                       @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </div>

        </div>
    </section>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                activeTab: '0',

                orderTime: '',
                orderName: '',
                goodsName: '',
                userName: '',
                options:[
                    { label:'是', value:'1' },
                    { label:'否', value:'0' }
                ],
                orderReply:'',

                orderList: [],
                tableLoading: true,

                pageCount: '',
                page: {
                    total: ''
                },
                pageSize: 20,
            }
        },
        watch: {},
        computed: {},
        mounted() {
            this.getOrderList();
        },
        methods: {
            handleClick(){
                this.getOrderList();
            },
            searchItem() {
                axios
                    .get('admin_goods_evaluates', {
                        params: {
                            name: this.orderName,
                            time: this.orderTime,
                        }
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        this.orderList = res;
                        this.tableLoading = false;
                    })
            },
            getOrderList(pagination = 1) {
                let params = {
                    pagination,
                    pageSize: this.pageSize
                };
                switch (this.activeTab){
                    case '1':
                        params.level = ['>', 4];
                        break;
                    case '2':
                        params.level = ['between', `2,4`];
                        break;
                    case '3':
                        params.level = ['<', 2];
                        break;
                    default:
                }
                axios
                    .get('admin_goods_evaluates', {
                        params
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        this.orderList = res;
                        this.tableLoading = false;
                    })
            },
            openMessageBox(row) {
                this.$prompt('请输入回复内容', '回复评论', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    if(value && value.length){
                        axios
                            .post('admin_goods_evaluates/'+row.id, {
                                reply: value,
                                _method: "PUT"
                            })
                            .then(res => {
                                this.$message({
                                    type: 'success',
                                    message: '你的回复是: ' + value
                                });
                                this.getOrderList();
                            })
                    }else {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            searchItem() {
                console.log(this.orderTime, this.orderName, this.goodsName, this.userName, this.orderReply)

                axios
                    .get(`/admin_goods`,
                        {
                            params:{
                                name: this.goodsName
                            }
                        }
                    ).then(res => res.data.data)
                    .then(res => {
                        console.log(res)
                    })
                axios
                    .get(`/admin_users`,
                        {
                            params:{
                                nickname: this.userName
                            }
                        }
                    ).then(res => res.data.data)
                    .then(res => {
                        console.log(res)
                    })
                axios
                    .get(`/admin_users`,
                        {
                            params:{
                                nickname: this.userName
                            }
                        }
                    ).then(res => res.data.data)
                    .then(res => {
                        console.log(res)
                    })

                axios
                    .get('admin_goods_evaluates', {
                        params: {
                            id: this.orderName,
                            time: this.orderTime,
                        }
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        this.orderList = res;
                        this.tableLoading = false;
                    })
            },
//             genData(data) {
//                 return {
//                     sort: data.sort,
//                     shop_id: data.shop_id,
//                     image: data.image ? data.image.join(',') : '',
//                     is_in_list: data.is_in_list,
//                     name: data.name,
//                 };
//             },
//             postData() {
//                 return axios
//                     .post('admin_goods_evaluates', this.genData(this.form))
//                     .then(res => {
//                         return res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg);
//                     });
//             },
            handleCurrentChange(current) {
                this.getOrderList(current);
            }
        }
    }
</script>
<style scoped>
    .order-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .order-con {
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .order-con__title {
        padding-bottom: 10px;
        border-bottom: 1px dashed #D8D8D8;
    }

    .table-box {
        min-height: calc(100vh - 92px);
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: space-around;

        width: 100%;
    }

    .order-goods{
        color: #3F7DFF;
        cursor: pointer
    }
    .order-goods:active{
        opacity: 0.8;
    }

</style>
<style>

</style>